<template>
  <div class="operate_manage" v-loading="loading>0">
    <div class="operate_headers">
      <div class="operate_header">
        <header class="header">用户数量</header>
        <div id="operate_user" class="operate_box"></div>
      </div>
      <div class="operate_header">
        <header class="header">文件数量</header>
        <div id="operate_file" class="operate_box"></div>
      </div>
      <div class="operate_header">
        <div class="operate_header_content">
          <header class="header">在线用户</header>
        </div>
        <div id="operate_online" class="operate_box"></div>
      </div>
      <div class="operate_header">
        <div class="operate_header_content">
          <header class="header">日活跃量</header>
          <el-button type="primary" size="mini" @click="handleExport('dailyLine', '日活跃量')" v-if="isAdmin">导出</el-button>
        </div>
        <div id="operate_days" class="operate_box"></div>
      </div>
    </div>

    <div class="operate_asides">
      <div class="operate_aside">
        <div class="operate_aside_content">
          <header class="header">文件访问量排名top 10</header>
          <el-button type="primary" size="mini" @click="handleExport('knowledgeView', '文件访问量')" v-if="isAdmin">导出</el-button>
        </div>
        <div id="file_visit" class="operate_box"></div>
      </div>
      <div class="operate_aside">
        <div class="operate_aside_content">
          <header class="header">用户访问量排名top 10</header>
          <el-button type="primary" size="mini" @click="handleExport('userView', '用户访问量')" v-if="isAdmin">导出</el-button>
        </div>
        <div id="user_visit" class="operate_box"></div>
      </div>
    </div>
    <div class="operate_table">
      <div class="operate_aside_content">
        <header class="header">公司使用统计</header>
      </div>
      <vxe-table
        stripe
        resizable
        ref="labelVxeTable"
        :data="tableData"
        :loading="isLoading"
      >
        <vxe-column field="label" title="公司名称"></vxe-column>
        <vxe-column field="value" title="人员数量"></vxe-column>
      </vxe-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      loading: 0,
      userCount: {},
      knowledgeCount: {},
      onlineCount: {},
      dailyLine: {},
      knowledgeView: {},
      userView: {},
      pageNo: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      isLoading: false,
    }
  },
  computed: {
    isAdmin() {
      return this.$store.state.user.isAdmin;
    },
  },
  mounted() {
    this.getUserCount()
    this.getKnowledgeCount()
    this.getOnlineCount()
    this.getDailyLine()
    this.getKnowledgeView()
    this.getUserView()
    this.getUserCompanyCount()
  },
  methods: {
    getUserCount() {
      this.loading++
      this.$http({
        url: "/operations/userCount",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.userCount = data.data;
        console.log('1111',data.data)
        this.getOperateUser()
      }).finally(()=>{
        this.loading--
      })
    },
    getKnowledgeCount() {
      this.loading++
      this.$http({
        url: "/operations/knowledgeCount",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.knowledgeCount = data.data;
        console.log('2222',data.data)
        this.getOperateFile()
      }).finally(()=>{
        this.loading--
      })
    },
    getOnlineCount() {
      this.loading++
      this.$http({
        url: "/operations/onlineCount",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.onlineCount = data.data;
        console.log('3333',data.data)
        this.getOperateOnline()
      }).finally(()=>{
        this.loading--
      })
    },
    getDailyLine() {
      this.loading++
      this.$http({
        url: "/operations/dailyLine",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.dailyLine = data.data;
        console.log('4444',data.data)
        this.getOperateDays()
      }).finally(()=>{
        this.loading--
      })
    },
    getKnowledgeView() {
      this.loading++
      this.$http({
        url: "/operations/knowledgeView",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.knowledgeView = data.data;
        console.log('5555',data.data)
        this.getFileVisit()
      }).finally(()=>{
        this.loading--
      })
    },
    getUserView() {
      this.loading++
      this.$http({
        url: "/operations/userView",
        method: "GET",
        params: {},
      }).then(({ data }) => {
        this.userView = data.data;
        console.log('666',data.data)
        this.getUserVisit()
      }).finally(()=>{
        this.loading--
      })
    },
    //echars 图表
    getOperateUser() {
      let that = this
      let data = that.userCount.list.map(item => {
        return {
          value: item.value,
          name: item.label,
          percent: item.proportion
        }
      })
      let operate_user = this.$echarts.init(document.getElementById('operate_user'))
      operate_user.setOption({
        title: [{
          text: '总用户数',
          subtext: that.userCount.count,
          textStyle: {
            fontSize: 14,
            color: '#828D99',
            fontFamily: '思源黑体'
          },
          subtextStyle: {
            fontSize: 30,
            fontWeight: 500,
            color: '#1C2126',
            fontFamily: '思源黑体'
          },
          textAlign: 'center',
          textVerticalAlign: 'center',
          top: '34%',
          left: '48%'
        }],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return params.name + '  <span style="color: #1C2126;">' + params.value + '  ' + params.percent + '%' + '</span>'
          }
        },
        legend: {
          bottom: '0',
          type: 'plain',
          orient: 'horizontal',
          left: '0',
          right: '0',
          icon: 'circle',
          textStyle: {
            color: '#828D99'
          },
          height: 100,
          formatter: (params) => {
            let obj = data.filter(item => item.name === params)
            return obj[0].name + '  ' + obj[0].value + '  ' + obj[0].percent + '%'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['70%', '100%'],
            color: ['#0084FF', '#00B42A', '#FA4614', '#005DB4', '#10E1C5', '#FAAD14'],
            top: 20,
            bottom: 100,
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      })
    },
    getOperateFile() {
      let that = this
      let data = that.knowledgeCount.list.map(item => {
        return {
          value: item.value,
          name: item.label,
          percent: item.proportion
        }
      })
      let operate_user = this.$echarts.init(document.getElementById('operate_file'))
      operate_user.setOption({
        title: [{
          text: '文件总数',
          subtext: that.knowledgeCount.count,
          textStyle: {
            fontSize: 14,
            color: '#828D99',
            fontFamily: '思源黑体'
          },
          subtextStyle: {
            fontSize: 30,
            fontWeight: 500,
            color: '#1C2126',
            fontFamily: '思源黑体'
          },
          textAlign: 'center',
          textVerticalAlign: 'center',
          top: '34%',
          left: '48%'
        }],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return params.name + '  <span style="color: #1C2126;">' + params.value + '  ' + params.percent + '%' + '</span>'
          }
        },
        legend: {
          bottom: '0',
          type: 'plain',
          orient: 'horizontal',
          left: '0',
          right: '0',
          icon: 'circle',
          textStyle: {
            color: '#828D99'
          },
          height: 100,
          formatter: (params) => {
            let obj = data.filter(item => item.name === params)
            return obj[0].name + '  ' + obj[0].value + '  ' + obj[0].percent + '%'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['70%', '100%'],
            color: ['#0084FF', '#00B42A', '#FA4614', '#005DB4', '#10E1C5', '#FAAD14'],
            top: 20,
            bottom: 100,
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      })
    },
    getOperateOnline() {
      let that = this
      let data = that.onlineCount.list.map(item => {
        return {
          value: item.value,
          name: item.label,
          percent: item.proportion
        }
      })
      let operate_user = this.$echarts.init(document.getElementById('operate_online'))
      operate_user.setOption({
        title: [{
          text: '总用户',
          subtext: that.onlineCount.count,
          textStyle: {
            fontSize: 14,
            color: '#828D99',
            fontFamily: '思源黑体'
          },
          subtextStyle: {
            fontSize: 30,
            fontWeight: 500,
            color: '#1C2126',
            fontFamily: '思源黑体'
          },
          textAlign: 'center',
          textVerticalAlign: 'center',
          top: '45%',
          left: '34%'
        }],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            return params.name + '  <span style="color: #1C2126;">' + params.value + '</span>'
          }
        },
        legend: {
          top: 'middle',
          type: 'plain',
          orient: 'vertical',
          align: 'left',
          left: 'right',
          icon: 'circle',
          textStyle: {
            color: '#828D99'
          },
          padding: 0,
          formatter: (params) => {
            let obj = data.filter(item => item.name === params)
            return obj[0].name + '  ' + obj[0].value
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['70%', '100%'],
            color: ['#0084FF', '#00B42A', '#FA4614', '#005DB4', '#10E1C5', '#FAAD14'],
            top: 'middle',
            left: 'left',
            width: '70%',
            height: '70%',
            label: {
              show: false
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ]
      })
    },
    getOperateDays() {
      let that = this
      let operate_user = this.$echarts.init(document.getElementById('operate_days'))
      operate_user.setOption({
        title: [{
          text: '日活跃量',
          show: false
        }],
        tooltip: {
          trigger: 'item',
          formatter: (params) => {
            if (params.color === '#23EE93') {
              return params.seriesName + params.value + '%'
            } else {
              return params.seriesName + params.value
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: that.dailyLine.dateList,
          axisLabel: {
            align: 'center', // 设置x轴标签居中对齐
            formatter: (params) => {
              return params.split('-')[1] + '-' + params.split('-')[2]
            }
          },
          axisTick: {
            show: false
          },
          axisPointer: {
            show: true,
            type: 'shadow'
          },
          // formatter: params => {
          //   return params.split('-')[2]
          // },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E6E9ED',
              type: 'dashed'
            }
          }
        },
        yAxis: [{
          // min: 0,
          // max: 60,
          type: 'value',
          alignTicks: true,
          splitNumber: 6,
          axisLine: {
            show: true,
            /*lineStyle: {
              color: '#E5E6EB'
            }*/
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E6E9ED',
              type: 'dashed'
            }
          }
        }, {
          min: 0,
          max: 100,
          type: 'value',
          alignTicks: true,
          splitNumber: 6,
          interval: 20,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E6E9ED',
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: params => {
              /*if (params === 0 || params === 100) {
                return params + '%'
              } else {
                return params.toFixed(2) + '%'
              }*/
              return params + '%'
            }
          },
        }],
        series: [
          {
            name: '用户占比：',
            type: 'line',
            color: '#23EE93',
            label: {
              show: false
            },
            smooth: 0.6,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },

            emphasis: {focus: 'series'},
            labelLine: {
              show: true
            },
            data: that.dailyLine.proportionList
          },
          {
            name: '日活跃量：',
            type: 'line',
            color: '#0066FF',
            label: {
              show: false
            },
            smooth: 0.6,
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },

            emphasis: {focus: 'series'},
            labelLine: {
              show: false
            },
            data: that.dailyLine.activeList
          }
        ]
      })
    },
    getFileVisit() {
      let that = this
      let salvProName = that.knowledgeView.map(item => item.label)
      let salvProValue = that.knowledgeView.map(item => item.value)
      let salvProMax = []//背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
      }
      let operate_user = this.$echarts.init(document.getElementById('file_visit'))
      operate_user.setOption({
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: 'middle',
              textStyle: {
                fontSize: '12'
              },
              formatter: function (value, index) {
                if (index < 3) {
                  return '{a' + index + '|' + (1 + index) + '}'
                } else {
                  return '{a|' + (1 + index) + '}'
                }
              },
              rich: {
                a0: {
                  color: '#ffffff',
                  backgroundColor: '#FF312A',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a1: {
                  color: '#ffffff',
                  backgroundColor: '#F76A60',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a2: {
                  color: '#ffffff',
                  backgroundColor: '#F7BB60',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a: {
                  color: '#ffffff',
                  backgroundColor: '#DCDEE1',
                  borderRadius: 4,
                  padding: [6, 9]
                }
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
          {
            type: 'category',
            inverse: true,
            position: 'left',
            axisLabel: {
              show: true,
              verticalAlign: 'top',
              lineHeight: -30,
              inside: true,
              // height: 40,
              textStyle: {
                // color: function (value, index) {
                //   return index === 0 ? '#FF312A' : index === 1 ? '#F76A60' : index === 2 ? '#F7BB60' : '#DCDEE1';
                // },
                color: '#1C2126',
                fontSize: '12'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: function (value, index) {
                  return index === 0 ? '#FF312A' : index === 1 ? '#F76A60' : index === 2 ? '#E68E09' : '#1C2126'
                },
                fontSize: '12'
              }
            },
            data: salvProValue
          }
        ],
        series: [
          {
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: '#4086FF'
              }
            },
            barWidth: 10,
            data: salvProValue
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: '#F4F6F9',
                barBorderRadius: 0
              }
            }
          }
        ]
      })
    },
    getUserVisit() {
      let that = this
      let salvProName = that.userView.map(item => item.label)
      let salvProValue = that.userView.map(item => item.value)
      let salvProMax = []//背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
      }
      let operate_user = this.$echarts.init(document.getElementById('user_visit'))
      operate_user.setOption({
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          formatter: function (params) {
            return params[0].name + ' : ' + params[0].value
          }
        },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              verticalAlign: 'middle',
              textStyle: {
                fontSize: '12'
              },
              formatter: function (value, index) {
                if (index < 3) {
                  return '{a' + index + '|' + (1 + index) + '}'
                } else {
                  return '{a|' + (1 + index) + '}'
                }
              },
              rich: {
                a0: {
                  color: '#ffffff',
                  backgroundColor: '#FF312A',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a1: {
                  color: '#ffffff',
                  backgroundColor: '#F76A60',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a2: {
                  color: '#ffffff',
                  backgroundColor: '#F7BB60',
                  borderRadius: 4,
                  padding: [6, 9]
                },
                a: {
                  color: '#ffffff',
                  backgroundColor: '#DCDEE1',
                  borderRadius: 4,
                  padding: [6, 9]
                }
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
          {
            type: 'category',
            inverse: true,
            position: 'left',
            axisLabel: {
              show: true,
              verticalAlign: 'top',
              lineHeight: -30,
              inside: true,
              // height: 40,
              textStyle: {
                // color: function (value, index) {
                //   return index === 0 ? '#FF312A' : index === 1 ? '#F76A60' : index === 2 ? '#F7BB60' : '#DCDEE1';
                // },
                color: '#1C2126',
                fontSize: '12'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: salvProName
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: function (value, index) {
                  return index === 0 ? '#FF312A' : index === 1 ? '#F76A60' : index === 2 ? '#E68E09' : '#1C2126'
                },
                fontSize: '12'
              }
            },
            data: salvProValue
          }
        ],
        series: [
          {
            name: '值',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 0,
                color: '#4086FF'
              }
            },
            barWidth: 10,
            data: salvProValue
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 10,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              normal: {
                color: '#F4F6F9',
                barBorderRadius: 0
              }
            }
          }
        ]
      })
    },
    handleExport(value, defaultName) {
      this.$utils.download({
        url: "/operations/export/" + value,
        method: "get",
        defaultFileName: `${defaultName}_${new Date().getTime()}.xlsx`,
      });
    },
    getUserCompanyCount() {
      this.isLoading = true
      this.$http({
        url: "/operations/userCompanyCount",
        method: "get",
        params: {
          pageNumber: this.pageNo,
          pageSize: this.pageSize,
        },
      }).then(({ data }) => {
        if (data.code == 200) {
          this.tableData = data.data.data;
          this.total = data.data.totalSize;
          this.isLoading = false
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getUserCompanyCount();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getUserCompanyCount();
    },
  }
}
</script>

<style lang="scss" scoped>
.operate_manage {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 30px;
  box-sizing: border-box;

  .operate_headers {
    width: 100%;
    height: 404px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #FFFFFF;

    .operate_header {
      padding: 27px 25px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;

      .operate_header_content {
        display: flex;
        justify-content: space-between;
      }

      & + .operate_header {
        border-left: 1px solid #F4F5F9;
      }

      .header {
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0px;
        color: #1C2126;
        position: relative;
        text-indent: 10px;

        &::before {
          content: '';
          width: 3px;
          height: 16px;
          background: #0084FF;
          position: absolute;
          left: 0;
          top: 3px;

        }
      }

      .operate_box {
        width: 100%;
        height: calc(100% - 22px);
      }
    }
  }

  .operate_asides {
    margin-top: 30px;
    width: 100%;
    height: 564px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 30px;
    overflow: hidden;

    .operate_aside {
      padding: 27px 25px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background: #FFFFFF;

      .operate_aside_content {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #D8D8D8;
        padding-bottom: 5px;
      }

      & + .operate_aside {
        border-left: 1px solid #F4F5F9;
      }

      .header {
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0px;
        color: #1C2126;
        position: relative;
        text-indent: 10px;
        padding-bottom: 10px;

        &::before {
          content: '';
          width: 3px;
          height: 16px;
          background: #0084FF;
          position: absolute;
          left: 0;
          top: 3px;

        }
      }

      .operate_box {
        width: 100%;
        height: calc(100% - 22px);
      }
    }
  }
  .operate_table {
    margin-top: 30px;
    padding: 27px 25px;
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
    .operate_aside_content {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #D8D8D8;
      padding-bottom: 5px;
    }
  }
}
</style>
